<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>
#drawing{border:1px solid #ddd;}
</style>
<script src="../第十三章事件/eventObject.js" type="text/javascript"></script>
</head>

<body>
	<canvas id="drawing" width="500" height="500">A drawing of something</canvas>
   
    <script>
    	var drawing = document.getElementById('drawing');
		
		//判断浏览器是否支持canvas(IE8-不支持)
		if(drawing.getContext){
			
			var context=drawing.getContext('2d');
			 
			var gradient=context.createLinearGradient(30, 30, 70, 70);
			
			gradient.addColorStop(0, '#fff');
			gradient.addColorStop(1, '#000');
			
			//绘制红色矩形
			context.fillStyle='#ff0000';
			context.fillRect(10,10,50,50);
			
			
			//绘制渐变矩形
			context.fillStyle=gradient;
			context.fillRect(50,50,50,50);
			
			
		}
		
		
		
		
    </script>
</body>
</html>
